<template>
    <div class="tv_records">
        <!--照会记录-->
        <el-table class="loan_history_table" max-height="320" :data="tableData" style="width: 100%">
            <el-table-column align="left" prop="orderId" :label="$t('common.innerOrderId')" width="200"></el-table-column><!--内部订单号-->
            <el-table-column align="left" :label="$t('common.addTime')" width="180"><!--添加时间-->
                <template slot-scope="scope">{{ scope.row.addTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column align="left" prop="auditorName" :label="$t('audit.auditPerson')" width="150"></el-table-column><!--信审员-->
            <el-table-column align="left" prop="tv1Text" label="TV1" width="210"></el-table-column>
            <el-table-column align="left" prop="tv2Text" label="TV2" width="200"></el-table-column>
            <el-table-column align="left" prop="tv3Text" label="TV3" width="200">
                <template slot-scope="scope">
                    {{ scope.row.tv3Code === 'G' ? scope.row.tv3Code + scope.row.tv3Text + '-' + scope.row.gtext : scope.row.tv3Text}}
                </template>
            </el-table-column>
            <el-table-column align="left" prop="tvRemark" label="" :label="$t('audit.TvExplanation')" min-width="200"><!--TV说明-->
                <template slot-scope="scope">
                    <div class="l_remark">
                        <span v-if="!scope.row.tvRemark || (scope.row.tvRemark && scope.row.tvRemark.length <= 10)">{{ scope.row.tvRemark}}</span>
                        <el-popover v-if="scope.row.tvRemark && scope.row.tvRemark.length > 10" trigger="hover" placement="top">
                            <p>{{ scope.row.tvRemark }}</p>
                            <div slot="reference">
                                <span v-if="scope.row.tvRemark.length > 10">{{ scope.row.tvRemark.substr(0, 10)}}...</span>
                                <span v-else>{{ scope.row.tvRemark }}</span>
                            </div>
                        </el-popover>
                    </div>
                </template>
            </el-table-column>
        </el-table><!--end table-->
        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';

    export default {
        name: 'tvRecords',
        components: {
            Pagination
        },
        mixins: [mixin],
        props: {
            updateType: {
                type: String
            }
        },
        data() {
            return {
                userId: '',
                orderId: '',
                // tableData: []
            };
        },
        watch: {
            updateType(val) {
                if (val === 'tvRecords') {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData(page = this.page) {
                // 获取照会注记
                const params = {
                    orderId: this.orderId,
                    userId: this.userId,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.$api.audit.getTvRemarkList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.data;
                        this.page.recordsTotal = data.pageCount;
                        if (this.updateType === 'tvRecords') {
                            this.$emit('updateOver');
                        }
                    }
                });
            },
        },
        created() {
            if (this.$route.params.id) {
                this.userId = this.$route.params.id;
                this.orderId = this.$route.params.orderId;
                this.page.pageSize = 4;
                this.getTableData();
            }
        },
    };
</script>

<style scoped>

</style>
